<template>
  <!-- 提交订单 -->
  <div>
    <van-nav-bar fixed title="提交订单" left-arrow @click-left="$utils.back($route.path)" />
    <div class="has-top has-bottom">
      <div>
				<p class="css-title1">您的菜品已下单成功</p>
				<p class="css-title2">菜品已下单到厨房，祝您用餐愉快</p>
        <div class="mlr-25">
          <div class="item">
            <div class="flex-s-s ptb-40 plr-25 ">
							<div>
								<svg-icon icon-class="yizi" class="fs-40 color-primary "/>
								<span class="color-dark ml15 fs-28">A03 | </span>
								<span class="color-dark fs-28">4人</span>
							</div>
            </div>
						<div class="greyline1" />
						<indentList :items="indent" :type="type"></indentList>
          </div>
          <div class="item">
						<p class="fs-28 pb-25 pt-30 ml-25">
							<span>订单金额</span>
						</p>
						<div class="greyline1" />
            <div class="plr-25">
              <p class="flex-s-c fs-28 lh-76">
                <span>商品总额</span>
                <span>￥{{totalPrice ? totalPrice.toFixed(2) : ''}}</span>
              </p>
							<p class="flex-s-c fs-28 lh-76">
                <span>打包费</span>
                <span>￥3.00</span>
              </p>
              <p class="flex-s-c fs-28 lh-76">
                <span>优惠券</span>
                <span>-￥20.00</span>
              </p>
            </div>
            <p class="ht tar fs-30 ptb-34 plr-25">
              共4件，实付：<span class="color-primary">￥{{totalPay ? totalPay.toFixed(2) : ''}}</span>
            </p>
          </div>
       
          <div class="item pd-25">
            <p class="fs-28">备注</p>
            <van-field v-model="remark" type="textarea" readonly class=" fs-28 mt-15" placeholder="请输入口味、偏好等要求" />
          </div>
					<div class="item pd-25">
						<p class="fs-28 pb-25 mt-5">
							<span>订单信息</span>
						</p>
						<div class="greyline1" />
						<div class="css-orderinfo mt-10">
							<span class="color-gray-light  fs-26">订单编号：</span>
							<span class="color-dark  fs-26">sn23456678900937</span>
						</div>
						<div class="css-orderinfo">
							<span class="color-gray-light fs-26">下单时间：</span>
							<span class="color-dark  fs-26">2021-08-06 9:34:24</span>
						</div>
						<div class="css-orderinfo">
							<span class="color-gray-light fs-26">配送方式：</span>
							<span class="color-dark  fs-26">外卖配送</span>
						</div>
					</div>
        </div>
      </div>
    </div>
		<!-- 底部确认订单 -->
		<div class="fixed-bottom">
				<div class="flex flex-s-c ptb-20 plr-25 bg-white bottom-box">
					<div class="flex">
						<span class="fs-24 color-dark mt-18">应付</span>
						<span class="color-primary fs-40 fw-600 mt-5">￥{{totalPay ? totalPay.toFixed(2) : ''}}</span>
					</div>
					<button class="bg-primary color-white btn fs-28 lh-80 br-45" @click.stop="submitOrder">立即支付</button>						
				</div>
		</div>
	
  </div>
</template>

<script>
import imgBox from 'components/imgBox'
import indentList from 'components/indentList'
import mealDetailList from 'components/mealDetailList'
import shopCart from 'components/purchase/shopCart'
import { GetPurchaseCarDetailPage, AddPurchaseOrder } from 'api/purchase'
export default {
  components: { imgBox, indentList,mealDetailList, shopCart },
  data() {
    return {
			type:'place',
			indent:[
				{
					id:1,
					picUrl:'https://img1.baidu.com/it/u=3756021882,3696420344&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800',
					unit:'位',
					name:'自助餐费',
					price:5,
					amount:3,
				},
				{
					id:1,
					picUrl:'https://img2.baidu.com/it/u=108457981,2972760881&fm=253&fmt=auto&app=138&f=JPEG?w=610&h=406',
					unit:'份',
					name:'米饭',
					price:3,
					amount:4,
				},
			], // 必选订单
			detaiList:[
				{
					id:1,
					picUrl:'https://img2.baidu.com/it/u=890587804,598493492&fm=253&fmt=auto&app=120&f=JPEG?w=1067&h=800',
					unit:'促',
					spec:'新用户促销活动',
					name:'牛排',
					price:5,
					amount:3,
				},
				{
					id:1,
					picUrl:'https://img2.baidu.com/it/u=3997425170,794536927&fm=253&fmt=auto&app=138&f=JPEG?w=584&h=500',
					unit:'减',
					spec:'满300减100',
					name:'意面',
					price:5,
					amount:3,
				},
			],
			remark:'微辣',
			totalPrice:255.333,	
			totalPay:200.00

    }
  },
  computed: {},
  created() {
    //console.log(typeof (this.$route.params.ids))
    //let ids = this.$route.params.ids
    //ids = ids.substring(0, ids.length - 1)
    //this.requsetData.carIds = ids
    //this.GetPurchaseCarDetailPage(ids)
  },

  methods: {
		submitOrder(){
			let payState = 'success'
			this.$router.push(`mealPayResult/${payState}`)
		}
    //AddPurchaseOrder() {
    //  AddPurchaseOrder(this.requsetData).then(res => {
    //    if (res && res.Data) {
    //      this.$router.push('/purchase/success/' + res.Data)
    //    }
    //  })
    //}
		
  }

}
</script>
<style lang="scss" scoped>
.checkbox{
 padding-left: 75px;
 &:before{
   top: 3px;
   left: 23px;
 }
 &:after{
   top: 6px;
   left: 35px;
 }
}
.left-checkbox{
  width: 120px;
  height: 32px;
   &:before{
     top: 0;
   left: 44px;
 }
 &:after{
   left: 56px;
   top: 4px;
 }
}
.item{
  background: $colorF;
  border-radius: 12px;
  margin-top: 20px;
  .list-bg{
     background: url("") #fff repeat-x center bottom;
    background-size: 30px auto;
  }
  .spec-item{
    padding: 10px 20px;
    background: $colorF7;
    border-radius: 6px;
    margin-top: 12px;
  }
  .checkbox{
    padding-left:0;
    &:before{
      right:0;
      top: 20px;
      left:auto;
    }
     &:after{
      right:12px;
      top: 24px;
      left:auto;
    }
  }
  .arrow:after{
    color:$colorC;
    right: 25px;
    top: 40px;
  }
  .arrow-box{
    width: 20px;
    height: 20px;
    margin-left: 40;
    flex-shrink: 0;
    &:after{
      top: 0;
      right: 0;
    }
  }
  .van-cell{
    background: $colorF7;
    border-radius: 6px;
    padding: 10px 6px;
    line-height: 1.5;
  }
}
.css-rightimg{
	width: 32px;
	height: 32px;
	margin-top: 5px;
}
.css-required{
	color: $red;
	margin-left: 30px;
	margin-right: 15px;
}
.bottom-box {
		position: relative;
		background: $colorF;
		height: 120px;
		z-index: 2;
		box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
}

.btn {
		width: 220px;
		padding: 0;
		line-height: 80px;
		border-radius: 40px;
		text-align: center;
}
.css-title1{
	font-size: 38px;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 16px;
}
.css-title2{
	font-size: 24px;
	text-align: center;
	margin-bottom: 30px;
	color:$color9;
}
.css-orderinfo{
	height: 80px;
	line-height: 80px;
}
</style>
